<template>
  <div class="HeaderTabar">
    <div class="leftspoabs">
      <menu-unfold-outlined @click="NoMOabile" />
      <transition name="el-fade-in-linear" v-if="os.isPc">
        <a-breadcrumb class="transition-box">
          <a-breadcrumb-item v-for="routes in list" :key="routes.path">
            <router-link :to="routes.path">
              {{ $t((<string>routes.meta!.title)) }}
            </router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </transition>
    </div>
    <div class="rightsUSer">
      <ul class="rigUserBtns">
        <li class="Usericon" @click="fontiS = true">
          <i class="iconfont icon-ziti icon "></i>
        </li>
        <li class="Usericon"><i class=" iconfont icon-tongzhi icon "></i></li>
        <li class="Usericon"><i class=" iconfont icon-sousuo icon "></i>
        </li>
        <li class="Usericon" @click="drw.setopendrawer"><i class="iconfont icon-pifu icon "></i></li>
      </ul>
      <!--  右侧内容 -->
      <div class="dropdmon">
        <a-dropdown>
          <span class="ant-dropdown-link" @click.prevent>
            <img :src="MockUser.avavr" alt="" class="imgAvavr">
            {{ UserAdminCommon.userinfoRouter }}
            <down-outlined />
          </span>
          <template #overlay>
            <a-menu @click="hangCommend">
              <a-menu-item key="/home">首页</a-menu-item>
              <a-menu-item key="">个人中心</a-menu-item>
              <a-menu-item key="https://gitee.com/mr-yichen/Vue-futuret-Admin">我的仓库</a-menu-item>
              <a-menu-item key="404">404</a-menu-item>
              <a-menu-item key="/login">退出登录</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
  <wangwangRoute />
  <Wang_Drawers ref="dreweir" />
  <a-modal v-model:open="fontiS" title="字体设置">
    <template #footer>

    </template>
    <p>
      <a-select v-model:value="fontsize" style="width: 100px" @change="handleChange">
        <a-select-option value="大号">大号</a-select-option>
        <a-select-option value="默认">默认</a-select-option>
        <a-select-option value="小号">小号</a-select-option>
      </a-select>

      <a-select v-model:value="ThemeConfig.internationalization" style="width: 100px" @change="langENset">
        <a-select-option value="en">英文</a-select-option>
        <a-select-option value="zh-cn">简体中文</a-select-option>
      </a-select>
    </p>
  </a-modal>
</template>

<script setup lang="ts" name="HeaderTabar">
import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
import { drawerStore } from '/@/stores/drawer'
import { DataViewState } from '/@/stores/RouterView'
import { ref, onMounted, watch, defineAsyncComponent } from 'vue'
import { Session } from '/@/units/Store'
import { MenuUnfoldOutlined, DownOutlined } from '@ant-design/icons-vue'
import { UserStoredefinedStore } from '/@/stores/userinfo'
import { MockUser } from '/@/mock'
import { isMobile } from '/@/units/IsPcMobile'
import routerList from '/@/router'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()


const os = isMobile()

const router = useRouter()
// 皮肤设置状态
const drw = drawerStore()
// 字号设置大小
const fontiS = ref<Boolean>(false)

const fontsize = ref<string>('默认')
const DataView = DataViewState()
const { ThemeConfig, isMobileNav } = storeToRefs(DataView)

const handleChange = (value: string): void => {
  const HTmle: HTMLElement = document.documentElement
  switch (value) {
    case '大号':
      HTmle.style.setProperty('--wangwang-FontSize', '18px')
      break;
    case '默认':
      HTmle.style.setProperty('--wangwang-FontSize', '14px')
      break;
    case '小号':
      HTmle.style.setProperty('--wangwang-FontSize', '12px')
      break;
  }
}


const NoMOabile = () => {
  if (os.isAndroid || os.isPhone) {
    isMobileNav.value = true
  }
}
const dreweir = ref()
const langENset = (e: string) => {
  locale.value = e
  dreweir.value.setThemeConfig()
}

// 用户权限设置状态
const UserAdminCommon = UserStoredefinedStore()

// 引入组件
const Wang_Drawers = defineAsyncComponent(() => import('/@/components/drawer/index.vue'))
const wangwangRoute = defineAsyncComponent(() => import('./wangwangRoute/index.vue'))

const { t } = useI18n()
const list = ref<RouteRecordRaw[]>([
  {
    path: '/',
    redirect: '/home',
    meta: {
      title: t('message.routes.home')
    }
  }
])




// 点击事件
const hangCommend = ({ key }: any) => {
  if (key.includes('http')) {
    return window.open(key, '_blank')
  }
  // 退出登录
  if (key === '/login') {
    Session.clear()
    router.push(key)
  } else {
    // 跳转页面
    router.push(key)
  }
}



const route = useRoute()



watch(
  [() => route.fullPath,
  () => DataView.ThemeConfig.internationalization],
  () => {
    isRoutersPansR()
  }
)

// 判断路由导航
const isRoutersPansR = (): void => {
  list.value = [
    {
      path: '/',
      redirect: '/home',
      meta: {
        title: t('message.routes.home')
      }
    }
  ]
  juroute()
}

onMounted(() => {
  isRoutersPansR()
})

// 获取循环匹配当前路由下的值  此数据匹配有误差，但可以学习一下，采用递归的方式
const judge_is_dnag = (aRRs: RouteRecordRaw[]): void => {
  aRRs.forEach((element: any) => {
    if (element.children) {
      if (element.children.some((v: any) => v.path === route.fullPath)) {
        list.value.push(element)
        const indexs = element.children.findIndex((p: any) => p.path === route.fullPath)
        list.value.push(element.children[indexs])
      } else {
        judge_is_dnag(element.children)
      }
    } else if (element.path === route.fullPath && element.meta.title !== '首页') {
      list.value.push(element)
    }
  })
}

//  获取数组循环匹配
const juroute = (): void => {
  const rou: Array<string> = route.fullPath.split('/').filter(e => e !== '')
  const ValueRouter: RouteRecordRaw[] = routerList.getRoutes()
  let rouP: string = ''
  if (route.fullPath === '/home') return
  rou.forEach((p: any) => {
    rouP = rouP + '/' + p
    for (let i = 0; i < ValueRouter.length; i++) {
      if (rouP === ValueRouter[i].path) {
        list.value.push(ValueRouter[i])
      }
    }
  })

}

</script>

<style scoped lang="scss">
/* Breadcrumb 面包屑过渡动画
------------------------------- */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s ease;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-leave-active {
  position: absolute;
  z-index: -1;
}

.HeaderTabar {
  height: 45px;
  margin-top: 2px;
  display: grid;
  grid-template-columns: 80% 20%;
  background-color: var(--wang-Top-bg-color);

  &>div {
    display: flex;
    align-items: center;
  }

  .leftspoabs {
    display: flex;
    align-items: center;
    color: var(--wang-Top-text-color);

    .anticon {
      margin-top: 1px;
    }

    .ant-breadcrumb {
      color: var(--wang-Top-text-color);


      .iconfont {
        color: var(--wang-Top-text-color);
      }

      li {

        a {
          color: var(--wang-Top-text-color);
        }
      }
    }


  }



  .rightsUSer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .rigUserBtns {
      display: flex;
      align-items: center;
      height: 100%;

      .Usericon {

        width: 20px;
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
        padding: 0 15px;

        margin: 0 5px;
        transition: all 0.2s;

        .icon {
          color: var(--wang-Top-text-color);
          font-size: var(--wangwang-FontSize);
        }

        i {
          display: inline-block;
        }

        &:hover {
          background-color: var(--wang-Top-hover-color);
        }

        &:active {
          transform: scale(1.2);
        }
      }
    }

    .dropdmon {
      color: var(--wang-Top-text-color);

      .imgAvavr {
        height: 30px;
        width: 30px;
        border-radius: 50%;
      }

    }
  }
}
</style>